memoryclient.js ➔ ... ➔ card.onclick - Code Metrics - bredsjomagnus/memorytest - Measure and Improve Code Quality continuously with Scrutinizer

memoryclient.js ➔ ... ➔ card.onclick A
last analyzed 2017-12-10 11:38 UTC

↳ Parent: memoryclient.js ➔ renderGameBoard

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
c	1
b	0
f	0
nc	1
dl	0
loc	12
rs	9.4285
cc	1
nop	0

(function () {
    let websocket;
    let connect     = document.getElementById("connect");
    let nickname    = document.getElementById('nickname');
    let clientlist  = document.getElementById("clientarea");
    let output      = document.getElementById("msgarea");
    let sendmessage = document.getElementById("messagebtn");
    let startgame   = document.getElementById("startgame");
    let nextturnbtn = document.getElementById("nextturnbtn");
    let clientmessage = document.getElementById("message");
    let close       = document.getElementById("disconnectbtn");
    var player;

    player = {
        nickname: 'anon',
        colorclass: 'blackplayer'
    };

    /**
    * Check nickname inputfield. If empty disable connectionbtn.
    */
    function doCheck() {
        var nicknamevalue;

        if (nicknamevalue === '') {

            document.getElementById("connect").disabled = true;
        } else {
            document.getElementById("connect").disabled = false;
        }
    }

    // Checking nickname inputfield when keyup or when focusout
    $('#nickname').keyup(doCheck).focusout(doCheck);

    function renderClientArea(jsonmsg) {
        var HTMLlist = "";
        var yourturn = "";

        if (jsonmsg.playersturn == undefined) {
            yourturn = "";

        }

        clientlist.innerHTML = "";
        for (var i = 0; i < jsonmsg.userarray.length; i++) {
            if (jsonmsg.userarray[i] === jsonmsg.playersturn) {
                yourturn = "- din tur";
            } else {
                yourturn = "";
            }
            if (jsonmsg.userarray[i] === player.nickname) {
                HTMLlist += "<p class="+jsonmsg.userscolors[i]+
                "><strong>"+jsonmsg.userarray[i]+"</strong> "+yourturn+"</p>";
            } else {
                HTMLlist += "<p class="+jsonmsg.userscolors[i]+">"+jsonmsg.userarray[i]+" "+yourturn+"</p>";
            }
        }
        clientlist.innerHTML = HTMLlist;
    }

    function renderGameBoard(gameboard) {
        var gameboardhtml;
        var gameboardrow;
        var card;
        var cardholder;

        document.getElementById("gameboard").innerHTML = "";
        gameboardhtml = document.createElement("table");
        gameboardhtml.setAttribute("class", "gameboardtable");

        for (let y = 0; y < gameboard.height; y++) {
            gameboardrow = document.createElement("tr");
            for (let x = 0; x < gameboard.width; x++) {
                cardholder = document.createElement("td");
                card = document.createElement("button");
                card.setAttribute("id", "place_"+x+"_"+y);
                card.setAttribute("class", "cardholder");
                if (gameboard.position.indexOf(x+""+y) == -1) {
                    card.innerHTML = "<img class='cardimage' src='/images/memorycards/cardbackside.png' />";
                } else {
                    // gameboard.cardvalue[gameboard.position.indexOf(x+""+y)] = kortvärdet alltså bilden
                    //
                    if (gameboard.pairvalues.indexOf(gameboard.cardvalue[gameboard.position.indexOf(x+""+y)]) != 1) {
                        card.setAttribute("class", "cardholder "+gameboard.paircolors[gameboard.pairvalues.indexOf(gameboard.cardvalue[gameboard.position.indexOf(x+""+y)])]);
                    }

                    card.innerHTML = "<img class='cardimage' src='/images/memorycards/"+gameboard.cardvalue[gameboard.position.indexOf(x+""+y)]+"' />";
                }
                if (gameboard.activeplayer == player.nickname) {
                    card.onclick = function() {
                        var msg;

                        msg = {
                            type: "clickingcard",
                            player: player.nickname,
                            colorclass: player.colorclass,
                            x: x,
                            y: y
                        };
                        websocket.send(JSON.stringify(msg));
                    };
                }
                cardholder.appendChild(card);
                gameboardrow.appendChild(cardholder);
            }
            gameboardhtml.appendChild(gameboardrow);
        }
        document.getElementById("gameboard").appendChild(gameboardhtml);
    }

    function addClientMsg(jsonmsg) {
        let now = new Date();
        let timestamp = now.toLocaleTimeString();
        var htmlmsg;
        var nick = jsonmsg.nick;
        var content = jsonmsg.content;
        var chatwindow = document.getElementById('chatwindow');

        htmlmsg = document.createElement('div');
        htmlmsg.className = "well clientmsgwell";
        htmlmsg.innerHTML = "<p>"+`${timestamp}`+" [<strong>"+nick+"</strong>]:<br>"+content+"</p>";
        chatwindow.appendChild(htmlmsg);
        chatwindow.scrollTop = chatwindow.scrollHeight;
        // output.appendChild(htmlmsg);
    }

    function setPlayerparams(jsonmsg) {
        console.log("Setting uniquenickname to " + jsonmsg.uniquenick);

        player.nickname = jsonmsg.uniquenick;
        player.colorclass = jsonmsg.colorclass;
    }

    /**
    * What to do when user clicks Connect
    */
    connect.addEventListener("click", function() {
        console.log("Connecting to ws://localhost:8001/.");

        websocket = new WebSocket('ws://localhost:8001/');

        // console.log("Connecting to ws://82.102.5.98:8001/.");
        // websocket = new WebSocket('ws://82.102.5.98:8001/');
        websocket.onopen = function() {
            console.log("The websocket is now open.");

            var msg;

            msg = {
                type: 'newuser',
                content: nickname.value
            };
            websocket.send(JSON.stringify(msg));
            $("#connectform").hide();
            $("#messageform").show();
            $("#startgame").show();
            document.getElementById('gameboard').innerHTML = '';
            $("#gameboard").show();
        };

        websocket.onmessage = function(event) {
            console.log("Receiving message: " + event.data);

            var jsonmsg;

            jsonmsg = JSON.parse(event.data);

            if (jsonmsg.type === 'users') {
                renderClientArea(jsonmsg);
            } else if (jsonmsg.type === 'uniquename') {
                setPlayerparams(jsonmsg);
            } else if (jsonmsg.type === 'clientmsg') {
                addClientMsg(jsonmsg);
            } else if (jsonmsg.type === 'startgame') {
                $("#startgame").hide();
                // generate gameboard on clientside.
                renderGameBoard(jsonmsg.gameboard);
                renderClientArea(jsonmsg);
            } else if (jsonmsg.type === 'turnbackstageone') {
                // när två olika kort lyfts
                // jsonmsg.gameboard är inte resettat i detta läge.
                renderGameBoard(jsonmsg.gameboard);
            } else if (jsonmsg.type === 'nextturnbtn') {
                $("#nextturnbtn").show();
            }
        };

        websocket.onclose = function() {
            console.log("The websocket is now closed.");

            // console.log(websocket);
            $("#messageform").hide();
            $("#startgame").hide();
            $("#gameboard").hide();
            $("#connectform").show();
        };
    }, false);

    /**
     * What to do when user clicks to send a message.
     */
    sendmessage.addEventListener("click", function(/*event*/) {
        let messagetext = clientmessage.value;
        var msg;

        if (!websocket || websocket.readyState === 3) {
            console.log("The websocket is not connected to a server.");

        } else {
            msg = {
                type: "clientmsg",
                nick: player.nickname,
                content: messagetext
            };
            websocket.send(JSON.stringify(msg));
            console.log("Sending message: " + messagetext);
            clientmessage.value = "";
        }
    });

    /**
     * What to do when starting a game and setting the table
     */
    startgame.addEventListener("click", function(/*event*/) {
        var msg;

        if (!websocket || websocket.readyState === 3) {
            console.log("The websocket is not connected to a server.");

        } else {
            msg = {
                type: "startgame"
            };
            websocket.send(JSON.stringify(msg));
            console.log("Starting up a new game");
            $("#startgame").hide();
        }
    });

    nextturnbtn.addEventListener("click", function(/*event*/) {
        var msg;

        if (!websocket || websocket.readyState === 3) {
            console.log("The websocket is not connected to a server.");

        } else {
            msg = {
                type: "flip"
            };
            websocket.send(JSON.stringify(msg));
            console.log("reset gameboard");
            $("#nextturnbtn").hide();
        }
    });



    /**
     * What to do when user clicks Close connection.
     */
    close.addEventListener("click", function(/*event*/) {
        console.log("Closing websocket for %s.", player.nickname);

        var msg;

        msg = {
            type: 'deleteuser',
            content: player.nickname
        };
        websocket.send(JSON.stringify(msg));
        clientlist.innerHTML = "";
        output.innerHTML = "";
        websocket.close();
    });
})();


1			(function () {
2			let websocket;
3			let connect = document.getElementById("connect");
4			let nickname = document.getElementById('nickname');
5			let clientlist = document.getElementById("clientarea");
6			let output = document.getElementById("msgarea");
7			let sendmessage = document.getElementById("messagebtn");
8			let startgame = document.getElementById("startgame");
9			let nextturnbtn = document.getElementById("nextturnbtn");
10			let clientmessage = document.getElementById("message");
11			let close = document.getElementById("disconnectbtn");
12			var player;
13
14			player = {
15			nickname: 'anon',
16			colorclass: 'blackplayer'
17			};
18
19			/**
20			* Check nickname inputfield. If empty disable connectionbtn.
21			*/
22			function doCheck() {
23			var nicknamevalue;
24
25			if (nicknamevalue === '') {
			0 ignored issues – show Bug introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report The variable `nicknamevalue` seems to be never initialized. Loading history...
26			document.getElementById("connect").disabled = true;
27			} else {
28			document.getElementById("connect").disabled = false;
29			}
30			}
31
32			// Checking nickname inputfield when keyup or when focusout
33			$('#nickname').keyup(doCheck).focusout(doCheck);
34
35			function renderClientArea(jsonmsg) {
36			var HTMLlist = "";
37			var yourturn = "";
38
39			if (jsonmsg.playersturn == undefined) {
40			yourturn = "";
			0 ignored issues – show Unused Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report The assignment to variable `yourturn` seems to be never used. Consider removing it. Loading history...
41			}
42
43			clientlist.innerHTML = "";
44			for (var i = 0; i < jsonmsg.userarray.length; i++) {
45			if (jsonmsg.userarray[i] === jsonmsg.playersturn) {
46			yourturn = "- din tur";
47			} else {
48			yourturn = "";
49			}
50			if (jsonmsg.userarray[i] === player.nickname) {
51			HTMLlist += "<p class="+jsonmsg.userscolors[i]+
52			"><strong>"+jsonmsg.userarray[i]+"</strong> "+yourturn+"</p>";
53			} else {
54			HTMLlist += "<p class="+jsonmsg.userscolors[i]+">"+jsonmsg.userarray[i]+" "+yourturn+"</p>";
55			}
56			}
57			clientlist.innerHTML = HTMLlist;
58			}
59
60			function renderGameBoard(gameboard) {
61			var gameboardhtml;
62			var gameboardrow;
63			var card;
64			var cardholder;
65
66			document.getElementById("gameboard").innerHTML = "";
67			gameboardhtml = document.createElement("table");
68			gameboardhtml.setAttribute("class", "gameboardtable");
69
70			for (let y = 0; y < gameboard.height; y++) {
71			gameboardrow = document.createElement("tr");
72			for (let x = 0; x < gameboard.width; x++) {
73			cardholder = document.createElement("td");
74			card = document.createElement("button");
75			card.setAttribute("id", "place_"+x+"_"+y);
76			card.setAttribute("class", "cardholder");
77			if (gameboard.position.indexOf(x+""+y) == -1) {
78			card.innerHTML = "<img class='cardimage' src='/images/memorycards/cardbackside.png' />";
79			} else {
80			// gameboard.cardvalue[gameboard.position.indexOf(x+""+y)] = kortvärdet alltså bilden
81			//
82			if (gameboard.pairvalues.indexOf(gameboard.cardvalue[gameboard.position.indexOf(x+""+y)]) != 1) {
83			card.setAttribute("class", "cardholder "+gameboard.paircolors[gameboard.pairvalues.indexOf(gameboard.cardvalue[gameboard.position.indexOf(x+""+y)])]);
84			}
85
86			card.innerHTML = "<img class='cardimage' src='/images/memorycards/"+gameboard.cardvalue[gameboard.position.indexOf(x+""+y)]+"' />";
87			}
88			if (gameboard.activeplayer == player.nickname) {
89			card.onclick = function() {
90			var msg;
91
92			msg = {
93			type: "clickingcard",
94			player: player.nickname,
95			colorclass: player.colorclass,
96			x: x,
97			y: y
98			};
99			websocket.send(JSON.stringify(msg));
100			};
101			}
102			cardholder.appendChild(card);
103			gameboardrow.appendChild(cardholder);
104			}
105			gameboardhtml.appendChild(gameboardrow);
106			}
107			document.getElementById("gameboard").appendChild(gameboardhtml);
108			}
109
110			function addClientMsg(jsonmsg) {
111			let now = new Date();
112			let timestamp = now.toLocaleTimeString();
113			var htmlmsg;
114			var nick = jsonmsg.nick;
115			var content = jsonmsg.content;
116			var chatwindow = document.getElementById('chatwindow');
117
118			htmlmsg = document.createElement('div');
119			htmlmsg.className = "well clientmsgwell";
120			htmlmsg.innerHTML = "<p>"+`${timestamp}`+" [<strong>"+nick+"</strong>]:<br>"+content+"</p>";
121			chatwindow.appendChild(htmlmsg);
122			chatwindow.scrollTop = chatwindow.scrollHeight;
123			// output.appendChild(htmlmsg);
124			}
125
126			function setPlayerparams(jsonmsg) {
127			console.log("Setting uniquenickname to " + jsonmsg.uniquenick);
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
128			player.nickname = jsonmsg.uniquenick;
129			player.colorclass = jsonmsg.colorclass;
130			}
131
132			/**
133			* What to do when user clicks Connect
134			*/
135			connect.addEventListener("click", function() {
136			console.log("Connecting to ws://localhost:8001/.");
			0 ignored issues – show Debugging Code introduced 2017-12-10 11:35 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
137			websocket = new WebSocket('ws://localhost:8001/');
			0 ignored issues – show Bug introduced 2017-12-10 11:35 UTC by Report Bug Copy Issue Report The variable `WebSocket` seems to be never declared. If this is a global, consider adding a `/** global: WebSocket */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
138			// console.log("Connecting to ws://82.102.5.98:8001/.");
139			// websocket = new WebSocket('ws://82.102.5.98:8001/');
140			websocket.onopen = function() {
141			console.log("The websocket is now open.");
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
142			var msg;
143
144			msg = {
145			type: 'newuser',
146			content: nickname.value
147			};
148			websocket.send(JSON.stringify(msg));
149			$("#connectform").hide();
150			$("#messageform").show();
151			$("#startgame").show();
152			document.getElementById('gameboard').innerHTML = '';
153			$("#gameboard").show();
154			};
155
156			websocket.onmessage = function(event) {
157			console.log("Receiving message: " + event.data);
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
158			var jsonmsg;
159
160			jsonmsg = JSON.parse(event.data);
161
162			if (jsonmsg.type === 'users') {
163			renderClientArea(jsonmsg);
164			} else if (jsonmsg.type === 'uniquename') {
165			setPlayerparams(jsonmsg);
166			} else if (jsonmsg.type === 'clientmsg') {
167			addClientMsg(jsonmsg);
168			} else if (jsonmsg.type === 'startgame') {
169			$("#startgame").hide();
170			// generate gameboard on clientside.
171			renderGameBoard(jsonmsg.gameboard);
172			renderClientArea(jsonmsg);
173			} else if (jsonmsg.type === 'turnbackstageone') {
174			// när två olika kort lyfts
175			// jsonmsg.gameboard är inte resettat i detta läge.
176			renderGameBoard(jsonmsg.gameboard);
177			} else if (jsonmsg.type === 'nextturnbtn') {
178			$("#nextturnbtn").show();
179			}
180			};
181
182			websocket.onclose = function() {
183			console.log("The websocket is now closed.");
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
184			// console.log(websocket);
185			$("#messageform").hide();
186			$("#startgame").hide();
187			$("#gameboard").hide();
188			$("#connectform").show();
189			};
190			}, false);
191
192			/**
193			* What to do when user clicks to send a message.
194			*/
195			sendmessage.addEventListener("click", function(/event/) {
196			let messagetext = clientmessage.value;
197			var msg;
198
199			if (!websocket \|\| websocket.readyState === 3) {
200			console.log("The websocket is not connected to a server.");
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
201			} else {
202			msg = {
203			type: "clientmsg",
204			nick: player.nickname,
205			content: messagetext
206			};
207			websocket.send(JSON.stringify(msg));
208			console.log("Sending message: " + messagetext);
209			clientmessage.value = "";
210			}
211			});
212
213			/**
214			* What to do when starting a game and setting the table
215			*/
216			startgame.addEventListener("click", function(/event/) {
217			var msg;
218
219			if (!websocket \|\| websocket.readyState === 3) {
220			console.log("The websocket is not connected to a server.");
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
221			} else {
222			msg = {
223			type: "startgame"
224			};
225			websocket.send(JSON.stringify(msg));
226			console.log("Starting up a new game");
227			$("#startgame").hide();
228			}
229			});
230
231			nextturnbtn.addEventListener("click", function(/event/) {
232			var msg;
233
234			if (!websocket \|\| websocket.readyState === 3) {
235			console.log("The websocket is not connected to a server.");
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
236			} else {
237			msg = {
238			type: "flip"
239			};
240			websocket.send(JSON.stringify(msg));
241			console.log("reset gameboard");
242			$("#nextturnbtn").hide();
243			}
244			});
245
246
247
248			/**
249			* What to do when user clicks Close connection.
250			*/
251			close.addEventListener("click", function(/event/) {
252			console.log("Closing websocket for %s.", player.nickname);
			0 ignored issues – show Debugging Code introduced 2017-12-09 17:56 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
253			var msg;
254
255			msg = {
256			type: 'deleteuser',
257			content: player.nickname
258			};
259			websocket.send(JSON.stringify(msg));
260			clientlist.innerHTML = "";
261			output.innerHTML = "";
262			websocket.close();
263			});
264			})();
265

bredsjomagnus / memorytest

memoryclient.js ➔ ... ➔ card.onclick A last analyzed 2017-12-10 11:38 UTC

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like

memoryclient.js ➔ ... ➔ card.onclick A
last analyzed 2017-12-10 11:38 UTC